<template>
	
	<view class="container">
		<view class="head">
			<navigator @click="navBack" class="return-arrow">
				<img class="return-img" src="../../static/arrow.png">
			</navigator>
			<view class="service-list">个人资料</view>			
		</view>
		<view class="userinfo-detail van-cell-group" >
			<view class="userInfo-box">
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
							<image class="logo-img" :src="imgInfo.avatarUrl" style="width: 80px;height: 80px;"></image>
						</div>
					</div>
				</view>
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
							<input type="text" maxlength="200"  disabled  class="van-field_control" :value="userInfo.name">
						</div>
					</div>
				</view>
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">登录账号</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
								<input type="text" maxlength="200" disabled :value="userInfo.username" class="van-field_control">
						</div>
					</div>
				</view>
				
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">角&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
								<span class="van-field_tags" v-for="rname in userInfo.rolesName">{{rname}}</span>
						</div>
					</div>
				</view>
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
								<input type="text" maxlength="200" disabled :value="userInfo.alName" class="van-field_control">
						</div>
					</div>
				</view>
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">占有股份</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
								<input type="text" maxlength="200" disabled :value="userInfo.auStock" class="van-field_control">
						</div>
					</div>
				</view>
				
			</view>
		</view>
				

		<view class="list-cell log-out-btn" @click="toEdit(userInfo.name)">
			<text class="cell-tit">修改资料</text>
		</view>
		<view class="list-cell log-out-btn" @click="toLogout">
			<text class="cell-tit">退出登录</text>
		</view>
	</view>
</template>

<script>
	import {  
	    mapMutations  
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo:[],
				imgInfo:[],
			};
		},
		onLoad(){
			this.getMember();
		},
		methods:{
			...mapMutations(['logout']),

			navBack(){
				uni.navigateBack();
			},
			toEdit(uuname){
				uni.navigateTo({
					url:'/pages/set/edit?uuname='+uuname+'&mcKey='+uni.getStorageSync('shop_id')+'&userId='+uni.getStorageSync('admin_code'),
				})
			},
			//退出登录
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		uni.setStorageSync('admin_id',"");
				    		uni.setStorageSync('admin_code',"");
				    		uni.setStorageSync('shop_id',"");
							uni.setStorageSync('shop_name',"");
				    		uni.setStorageSync('admin_name',"");
							uni.setStorageSync('admin_phone',"");
							uni.setStorageSync('admin_username',"");
							uni.setStorageSync('admin_img','/adminApp/static/work_member/default.jpeg');
				    		setTimeout(()=>{
				    			uni.navigateBack();
				    		}, 200)
				    	}
				    }
				});
			},
			getMember(){
				uni.showLoading({
					title: '获取信息中'
				});
				uni.request({
					url: uni.getStorageSync('api_url')+'/member/getShoperInfoById?mcKey='+uni.getStorageSync('shop_id')+'&userId='+uni.getStorageSync('admin_code'),
					complete: (result) => {
						uni.hideLoading();
						if(result.data.code != 1){
							uni.showToast({
								title:result.data.msg
							});
						}else{
							this.userInfo = result.data.data;
							this.imgInfo={avatarUrl:uni.getStorageSync('admin_img').replace("/adminApp","")}
						}
				},
			});
			
		},
			//switch
			switchChange(e){
				let statusTip = e.detail.value ? '打开': '关闭';
				this.$api.msg(`${statusTip}消息推送`);
			},

		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: #6d1c79;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
	.head{
		width: 100%;
		background-color: #ffffff;
		text-align: center;
		margin-bottom: 0.5rem;
	}
	.head img{float: left;margin: 5px 10px;}
	.userinfo-detail .submit-box uni-button {
			height:40px;
			line-height: 40px;
		}
		.userinfo-detail {
			padding: 10px;
			background: #f8f8f8;
		}
		.userInfo-box {
			background: #fff;
			padding: 5px;
		}
		.userinfo-detail .box-content {
			height: auto;
			overflow: scroll;
			max-height: 100%;
		}
		.userinfo-detail .submit-box {
			position: fixed;
		}
		.userinfo-detail .qty-box {
			padding: 0 8px;
		}
		.userinfo-detail .tc-box {
			margin-bottom: 40px;
			padding-right: 8px;
		}
		.userinfo-detail .qty-box .qty-title {
			float: left;
			line-height: 35px;
			height: 35px;
		}
		.userinfo-detail .qty-box uni-input {
			float: right;
			border: none;
		}
		.userinfo-detail .van-cell {
			padding-right: 10px;
			width: 100%;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: flex;
			line-height: 24px;
			position: relative;
			background-color: #fff;
			color: #323233;
			font-size: 14px;
			overflow: hidden;
			margin-bottom:5px;
			padding-left: 8px;
			border-bottom: 1px solid #f1f1f1;
		}
		.userinfo-detail .van-cell_title {
			max-width: 90px;
			height:35px;
			line-height: 35px;
			color: #555;
		}
		.userinfo-detail .van-cell_title, 
		.userinfo-detail .van-cell_value {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-moz-box-flex: 1;
			flex: 1;
		}
		.userinfo-detail .van-cell_value {
			color: #969799;
			overflow: hidden;
			text-align: right;
			position: relative;
			vertical-align: middle;
		}
		.userinfo-detail .van-cell_select {
			overflow: hidden;
			text-align: right;
			position: relative;
			vertical-align: middle;
			height: 35px;
			width: 110px;
			color: #000;
			border-color: #969799;
			background: #fff;
		}
		.userinfo-detail uni-textarea {
			max-height: 50px;
			text-align: left;
			border: 1px solid #969799;
		}
		.userinfo-detail .van-field_body {
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-moz-box-align: center;
			align-items: center;
		}
		.userinfo-detail .van-field_control {
			border: 0;
			margin: 0;
			padding: 0;
			width: 100%;
			resize: none;
			display: block;
			color: #323233;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			background-color: transparent;
			text-align: left;
			height: 35px;
			line-height: 35px;
			border-radius: 0;
			font-size:14px;
		}
		.userinfo-detail .uni-textarea-placeholder{
			color:#ccc;
		}
		.userinfo-detail .van-cell-required .title-bac {
			position: absolute;
			left: 5px;
			font-size: 14px;
			color: #f44;
			top: 10px;
			width: 15px;
			height: 15px;
		}
		.userinfo-detail .uni-textarea-placeholder{
			color: #ccc;
		}
	
		.userinfo-detail .uni-input-input{
			color:red;
		}
		.userinfo-detail .notes{
			clear: both;
			padding: 5px 8px;
			border: 1px dashed #00c971;
			font-size: 14px;
		}
		.userinfo-detail .van-field_tc .van-field_control{
	
		}
		.userinfo-detail .van-field_tc  uni-button{
			border-bottom: none;
			border: 1px solid #ccc;
			text-align: center;
			border-radius: 5px;
			height: 34px;
			line-height: 34px;
			font-size: 14px;
			font-weight: normal;
			background: #fff;
			color: #000;
			padding: 0 8px;
			margin: 0;
		}
		.userinfo-detail .van-field_tc .tc_active {
			background: #00c971;
			color: #fff;
			border: 1px solid #00c971;
		}
		.userinfo-detail .goods-info {
			margin: 10px 0;
			background: #fff;
			padding: 5px;
		}
		.userinfo-detail .goods-info .goods-info-tit {
			font-size: 14px;
			font-weight: 700;
			margin: 5px;
			display: block;
		}
		.userinfo-detail .submit-box {
			position: fixed;
			bottom: 0;
			background: #fff;
			border-top: 1px solid #ccc;
			width: 100%;
		}
		.userinfo-detail .submit-box span {
			font-size: 18px;
			line-height: 40px;
			color: #aaa;
			text-align: right;
			width: 50%;
			float: left;
		}
		.userinfo-detail .submit-box span.total_price {
		    color: #fe9d05;
		    text-align: left;
		    font-weight: bolder;
			float: right;
			font-size: 18px;
			line-height: 40px;
		}
		.userinfo-detail .submit-box uni-button {
		    background: #00d97a;
		    color: #fff;
		    border-radius: 0!important;
			height: 40px;
			line-height: 40px;
			width: 50%;
			float: left;
		}
		.userinfo-detail .van-field_tags {
			background-color: #3c8dbc;
			border-color: #367fa9;
			padding: 1px 10px;
			color: #fff;
			border-radius: 4px;
			cursor: default;
			float: left;
			margin-right: 5px;
			margin-top: 5px;
		}
		.service-agreement {
			margin-bottom: 40px;
		}
</style>
